
<template>
  <div class="eidt-view">
    <CellGroup inset style="margin:0;">
      <Field
        label="地块名称"
        input-align="right"
        required
        v-model="landInfo.farmLandName"
      />
      <Field
        label="地块面积"
        input-align="right"
        readonly
        style="--van-field-input-text-color:#888"
        :model-value="(landInfo?.mapAreaSize?.toFixed(2)||0)+'亩'"
      />
      <Field
        clearable
        label="地块位置" 
        style="--van-field-input-text-color:#888"
        :model-value="landInfo?.locationAddress"
        input-align="right"
        readonly
        type="textarea"
        rows="1"
        autosize
      />
      <Field
        label="地块分组"
        input-align="right"
        required
        readonly
        :model-value="landInfo?.groupName||'--'"
        right-icon="arrow"
        @click="btnOpen(1)"
      />
      <Field
        label="土壤类型"
        readonly
        required>
        <template #button>
          <RadioGroup v-model="landInfo.landTypeId" direction="horizontal" shape="square">
            <Radio :name="item.landTypeId" :key="item.landTypeId" v-for="item in landTypeList">{{item.landTypeName}}</Radio>
          </RadioGroup> 
      </template>
      </Field>
      <Field
        label="土壤质地"
        input-align="right"
        readonly
        :model-value="landInfo?.geologyName||'--'"
        @click="showPicker=true"
        :right-icon="showPicker?'arrow-up':'arrow-down'"
      />
      <Field
        clearable
        label="地块权属"
        :model-value="landInfo?.landBelong||'--'"
        readonly
        input-align="right"
        right-icon="arrow"
        @click="btnOpen(3)"
      />
      <Field
        clearable
        label="地块标签"
        :model-value="landInfo?.tagName||'--'"
        readonly
        input-align="right"
        right-icon="arrow"
        @click="btnOpen(2)"
      />
    </CellGroup>
      <Popup
        v-model:show="openEidtPopup"
        :overlay="true"
        close-icon="close"
        closeable
        position="bottom"
        :overlay-style="{backgroundColor:'#00000010'}"
        :style="{ padding:'10px 0', height: '100%' }">
        <template v-if="openEidtPopup">
            <!-- 地块分组编辑 -->
          <landGroup v-if="openEidtType==1" farmLandId="152522"  @change="changeITem" ></landGroup>
          <!-- 地块标签编辑 -->
          <landTags v-if="openEidtType==2" farmLandId="152522" @change="changeITem"></landTags>
            <!-- 地块权属编辑 -->
          <landBelong v-if="openEidtType==3" farmLandId="152522" @change="changeITem"></landBelong>
        </template>
        
      </Popup>
      <Popup v-model:show="showPicker"  :position="'bottom'">
        <Picker 
          v-model="selectedValues"
          :columns="geologyList"
          title="地块质地" 
          :columns-field-names="{text:'geologyName',value:'geologyId'}"
          @cancel="showPicker = false"
          @confirm="onConfirm"
        />
    </Popup>
      <div  class="btn-save">
      <Button
        icon="certificate"
        style="width:90%;"
        @click="btnSave"
        type="success"> 保存</Button> 
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import {getLandDetail,eidtLand,getLandTypeList,getGeologyList} from '@/api/gis'
import landGroup from './components/landGroup.vue'
import landBelong from './components/landBelong.vue'
import landTags from './components/landTags.vue'
import { getCookie,setCookie } from '@/utils/httpParamsHandler';
import { Button,CellGroup,Field,Popup,Picker,showNotify,RadioGroup,Radio} from 'vant';
const openEidtPopup:any = ref(false)
const openEidtType:any = ref(1)
const landInfo:any=ref({})
const landTypeList:any=ref([])
const selectedValues:any=ref([])
const showPicker:any = ref(false)
const geologyList:any=ref([])
onMounted(async ()=>{
  getLandInfo()
  getLandType()

  if(getCookie('title')){
    document.title=decodeURIComponent(decodeURIComponent(getCookie('title')))||'--'
  }

  window.setTimeout(() => {
    setCookie('title','')
  }, 5000);
})
const getLandInfo =()=>{
  getLandDetail({farmLandId:getCookie('landId')}).then((res:any)=>{
      if(res.success){
        landInfo.value = res.data
      }
    })
}
const getLandType =async ()=>{
  //类型
  let res2:any = await getLandTypeList({page:1,limit:100,companyId:getCookie('companyId')})
  if(res2.success){
    landTypeList.value = res2.data||[]
  }
  //类型
  let res:any = await getGeologyList({page:1,limit:100,companyId:getCookie('companyId')})
  if(res.success){
    geologyList.value = res.data||[]
  }
}
const btnOpen =(openType:any)=>{
  openEidtType.value = openType
  openEidtPopup.value = true
}

const onConfirm =(row:any)=>{
  showPicker.value = false
  selectedValues.value=row.selectedValues
  landInfo.value={
    ...landInfo?.value,
    geologyId:row.selectedOptions[0].geologyId,
    geologyName:row.selectedOptions[0].geologyName
   }
}

const btnSave =async ()=>{
 if(!landInfo.value.landGroupId){
  showNotify({type: 'warning', message: '请选择分组' });
  return
 }
 if(!landInfo.value.landTypeId){
  showNotify({type: 'warning', message: '请选择类型' });
  return
 }
  let res:any = await eidtLand({
    farmId:getCookie('farmId'),
    farmLandId:getCookie('landId'),
    landTypeId:landInfo.value.landTypeId,
    farmLandName:landInfo.value.farmLandName,
    landGroupId:landInfo.value.landGroupId,
    groupName:landInfo.value.groupName,
    landTagIds:landInfo.value.landTagIds?.split(','),
    tagName:landInfo.value.tagName,
    landBelongId:landInfo.value.landBelongId,
    landBelong:landInfo.value.landBelong,
    geologyId:landInfo.value.geologyId,
    geologyName:landInfo.value.geologyName
})
  if(res.success){
    showNotify({type: 'success', message: '保存成功' });
    window.setTimeout(()=>{
      wx.miniProgram.navigateBack()
    },2000)
  }else{
    showNotify({type: 'danger', message: res.message});
  }
}
const changeITem =(item:any)=>{
  openEidtPopup.value = false
  if(item.landGroupId){
    landInfo.value={
    ...landInfo?.value,
    landGroupId:item.landGroupId,
    groupName:item.groupName
   }
  }
  if(item?.landBelongId){ 
    landInfo.value={
    ...landInfo?.value,
    landBelongId:item.landBelongId,
    landBelong:item.landBelong
   }
  }
  if(item?.landTagIds){
    landInfo.value={
    ...landInfo?.value,
    landTagIds:item.landTagIds,
    tagName:item.tagName
   }
  }
}
</script>
<style lang="scss" scoped>
.eidt-view{
  height:100vh;
  width:100vw;
  position: relative;
  overflow-y: scroll;
  overflow-x: hidden;
}
.btn-save{
  margin:20px auto;
  width:100%;
  text-align: center;
}
</style>
